<template>
	<view @touchmove.stop.prevent>
		<view
			class="modal-box"
			:style="{ width: props.width, padding: props.padding, borderRadius: props.radius }"
			:class="[
				fadein || props.show ? 'modal-normal' : 'modal-scale',
				props.show ? 'modal-show' : '',
			]">
			<slot></slot>
			<view class="close-btn">
				<view class="line"></view>
				<uv-icon name="close" size="20" color="#fff" @click="handleClickCancel(true)"></uv-icon>
			</view>
		</view>

		<view
			class="modal-mask"
			:class="[props.show ? 'mask-show' : '']"
			@tap="handleClickCancel"></view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	const props = defineProps({
		show: { type: Boolean, default: false },
		width: { type: String, default: '84%' },
		padding: { type: String, default: '0' },
		radius: { type: String, default: '24rpx' },
		title: { type: String, default: '' },
		content: { type: String, default: '' },
		color: { type: String, default: '#999' },
		size: { type: Number, default: 28 },
		shape: { type: String, default: 'square' }, //形状 circle, square
		maskClosable: { type: Boolean, default: false },
		fadein: { type: Boolean, default: false }, //淡入效果，自定义弹框插入input输入框时传true
	})

	const emit = defineEmits(['click', 'cancel', 'test'])
	const handleClick = e => {
		if (!props.show) return
		const dataset = e.currentTarget.dataset
		emit('click', {
			index: Number(dataset.index),
		})
	}
	const handleClickCancel = (flag) => {
		if (flag) {
			emit('cancel')
			return
		}
		if (!props.maskClosable) return
		emit('cancel')
	}
</script>

<style lang="scss">
	.modal-box {
		position: fixed;
		left: 50%;
		top: 50%;
		margin: auto;
		background: #fff;
		z-index: 999999;
		transition: all 0.3s ease-in-out;
		opacity: 0;
		box-sizing: border-box;
		visibility: hidden;
	}

	.modal-scale {
		transform: translate(-50%, -50%) scale(0);
	}

	.modal-normal {
		transform: translate(-50%, -50%) scale(1);
	}

	.modal-show {
		opacity: 1;
		visibility: visible;
	}

	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 999998;
		transition: all 0.3s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}

	.mask-show {
		visibility: visible;
		opacity: 1;
	}
	$size: 60rpx;
	.close-btn{
		position: absolute;
		left: calc(50% - #{$size / 2});
		top: calc(100% + $size);
		border-radius: 50%;
		width: $size;
		height: $size;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 4rpx solid #fff;
		box-sizing: border-box;
		.line{
			position: absolute;
			top: -($size + 4rpx);
			left: ($size / 2) - 4rpx;
			width: 4rpx;
			height: $size;
			background: #ccc;
		}
	}
</style>
